<template>
  <div id="matchHistory">
    <div class="showDiv05">
      <div class="topBox">
        <div>
          <div data-v-378b4e67 class="notice-box"></div>
          历史匹配记录
        </div>
        <span class="reMatch" @click="reMatch"
          >重新匹配 <img src="@/assets/li/more.png"
        /></span>
      </div>
      <section style="min-height: 820px">
        <table class="table">
          <thead>
            <tr>
              <th>查询日期</th>
              <!-- <th>对标商品</th> -->
              <th>对标信息</th>
              <th>推荐达人</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-show="!loadingH && historyList.length != 0">
            <tr v-for="(item, index) in historyList" :key="index">
              <td>{{ item.createTime.split(" ")[0] }}</td>
              <!-- <td>
                <div class="goodsBox" @click="toGoodsPage(item.productId)">
                  <img :src="item.proLogo" alt class="leftImg" />

                  <div class="rightBox">
                    <div>
                      <div style="margin-right: 5px" v-if="item.fromId != 6">
                        <SourceIcon :sourceid="item.fromId" class="img1" />
                      </div>
                      <span
                        :style="{
                          textIndent:
                            item.fromId == '' || item.fromId == '6'
                              ? '5px'
                              : '24px'
                        }"
                        >{{ item.proTitle }}</span
                      >
                    </div>
                  </div>
                </div>
              </td> -->
              <td>{{ item.priceDescription }}</td>
              <td>
                <div class="talentBox" v-if="item.listDetail.length != 0">
                  <img
                    v-for="(item01, index01) in item.listDetail"
                    :key="index01"
                    :src="item01.authorLogo"
                    @click="toTalentPage(item01.author)"
                  />
                </div>
                <span
                  class="talentBox"
                  v-if="item.listDetail.length == 0 && item.status == 1"
                  >暂未匹配到任何达人</span
                >
              </td>
              <td>
                <button class="detailsBtn02" v-if="item.status != 1">
                  正在匹配
                </button>
                <button
                  class="detailsBtn"
                  @click="toMatchDetails(item)"
                  v-if="item.status == 1"
                >
                  查看详情
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          v-loading="loadingH"
          v-if="loadingH"
          class="loading"
          element-loading-text="拼命加载中..."
          element-loading-spinner="el-icon-loading"
        ></div>
        <div class="empty" v-show="!loadingH && historyList.length == 0">
          <img src="@/assets/liu/zw.png" />
          <p>目前没有可以查看的数据哟~</p>
        </div>
      </section>
      <div class="pageBox">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="countH"
          :page-size="10"
          :current-page="pageH"
          @current-change="getHistoryList"
          v-if="!loadingH && countH"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SourceIcon from "@/component/SourceIcon.vue";
import HeaderAly from "../HeaderAly.vue";
export default {
  name: "matchHistory",
  components: { SourceIcon, HeaderAly },
  data() {
    return {
      // 历史记录
      cancel08: null,
      pageH: 1,
      historyList: [],
      busy: false,
      loadingH: true,
      talentCount: "",
      matchTime: "",
      countH: "",
      timename: ""
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getHistoryList();
    this.timename = setInterval(() => {
      this.getHistoryList();
    }, 30000);
    document.title = "智能找达人&智能分析服务平台-掌上精选";
  },
  mounted() {},

  methods: {
    reMatch() {
      this.$router.push({
        path: `/inAnalysis/SearchGoodsAly01`
      });
    },
    // 历史记录
    getHistoryList(cpage) {
      let that = this;
      this.loadingH = true;
      if (cpage) {
        that.pageH = cpage;
        this.backTop();
      }
      that.$axios
        .get(
          "/api/intelligent/productMatchHistory",
          {
            params: {
              pageIndex: that.pageH,
              pageSize: 10
            }
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel08 != null) {
                that.cancel08();
              }
              that.cancel08 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            this.historyList = res.data.data;
            this.countH = res.data.count;
            let a = this.historyList.every(item => {
              return item.status == 1;
            });
            if (a) {
              clearTimeout(this.timename);
            }
            that.loadingH = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 跳商品详情
    toGoodsPage(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`
      });
      window.open(router.href, "_blank");
    },
    // 跳达人详情
    toTalentPage(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/0`
      });
      window.open(router.href, "_blank");
    },
    // 查看匹配详情
    toMatchDetails(item) {
      let that = this;
      localStorage.setItem("mTalentHasData", true);
      let matchTalentInfo = {};
      matchTalentInfo.matchTime = item.createTime;
      matchTalentInfo.total = item.total;

      localStorage.setItem("matchListDetail", JSON.stringify(item.listDetail));
      localStorage.setItem("matchTalentInfo", JSON.stringify(matchTalentInfo));
      localStorage.setItem("notMatchId", 2);
      localStorage.setItem("mTalentHasData", true);

      this.$router.push({
        // path: `/inAnalysis/MatchResult`
        path: `/inAnalysis/seekTalentDetails`
      });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
  }
};
</script>
<style lang="less" scoped>
#matchHistory {
  background-color: #f5f5f5;
  .showDiv05 {
    width: 1200px;
    margin: 0 auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 4px;
    margin-top: 14px;
    min-height: 100vh;
    height: fit-content;
    .topBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .notice-box {
        display: inline-block;
        width: 4px;
        height: 16px;
        border-radius: 100px;
        margin-right: 6px;
        background-color: #fd7f2c;
        margin-top: 1px;
      }
      > div {
        font-size: 16px;
        color: #222;
        font-weight: 600;

        display: flex;
        align-items: center;
      }
      span {
        font-size: 14px;
        color: #fd7f2c;
        cursor: pointer;
      }
    }
    table {
      margin-top: 20px;
      thead {
        tr {
          // th:nth-child(2) {
          //   width: 350px;
          // }
        }
      }
      tbody {
        tr {
          height: 77px;
          text-align: center;
          td:nth-child(1) {
            font-size: 15px;
            font-family: DINAlternate-Bold;
          }
          td:nth-child(2) {
            font-size: 15px;
          }
        }
      }
    }
    // 商品
    .goodsBox {
      display: flex;
      padding-left: 40px;
      align-items: center;
      cursor: pointer;
      .leftImg {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
      }
      .img1 {
        /deep/img {
          position: absolute;
          top: 2px;
          left: 6px;
        }
      }
      .rightBox {
        flex: 1;
        margin-left: 10px;
        text-align: left;
        position: relative;
        div:nth-of-type(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: left;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          span {
            display: block;
            width: 200px;
            text-align: left;
            font-weight: 600;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-indent: 24px;
            line-height: 20px;
            font-size: 14px;
          }
          > span:hover {
            color: #ff924b;
          }
        }
      }
    }
    .detailsBtn02 {
      width: 88px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      color: #555;
    }
    .detailsBtn {
      width: 88px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      font-size: 14px;
      color: #ffffff;
    }
    .detailsBtn:hover {
      background-color: #ff924b;
    }
    .talentBox {
      display: flex;
      justify-content: center;
      cursor: pointer;
      font-size: 15px;
      color: #888;
      img {
        border-radius: 50%;
        width: 42px;
        height: 41px;
        background-color: #439ae8;
        border: solid 6px #ffffff;
        margin-left: -12px;
      }
    }
  }
  .reMatch {
    > img {
      width: 7px;
      height: 11px;
      margin-left: 5px;
      margin-top: -3px;
    }
  }
}
</style>
